<!--
// 
// Card.vue
// hs-admin
// 
// 2024/10/29.
// 
-->
<template>
    <div class="Card">
        <g-flex row justify-content-between align-items-center class="head" width="calc(100% + 6px)"><div class="title">{{title}}</div><slot name="right"></slot></g-flex>
        <slot></slot>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const props = defineProps({
    title: {
        type: String,
    }
});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();


onMounted(() => {
})
</script>

<style scoped lang="scss">
.Card {
    border: 1px solid var(--el-color-primary);
    border-top-width: 0;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    border-radius: 0 6px 6px 6px;
    background: #fff;
    .head {
        box-sizing: border-box;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: bold;
        border-left: 6px solid var(--el-color-primary);
        transform: translateX(-6px);
        border-radius: 6px 6px 0 6px;
        border-bottom: 1px solid #e0e0e0;
        border-top: 1px solid var(--el-color-primary);

    }
}
@media (width > 1300px) {
    .Card {
        width: calc(50% - 20px);
        margin-right: 20px;
        margin-bottom: 10px;
    }
}
@media (800px < width <= 1300px) {
    .Card {
        width: calc(100% - 20px);
        margin-right: 20px;
        margin-bottom: 20px;
    }
}
@media (width <= 800px) {
    .Card {
        width: calc(100% - 10px);
        margin-right: 10px;
        margin-bottom: 10px;
    }
}
</style>